<template>
  <q-page class="q-pa-sm bg-white" :style-fn="styFn">
    <div class="row" v-if="!$q.screen.lt.sm">
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <q-card class="no-shadow" bordered>
          <q-scroll-area :style="{ height: pageHeight - 57 + 'px !important' }">
            <q-tab-panels v-model="tab" animated class="bg-white">
              <q-tab-panel name="all" class="q-pa-none">
                <q-list class="">
                  <q-item-label class="text-center q-pa-sm">
                    <q-input dense rounded outlined v-model="search">
                      <template v-slot:append>
                        <q-icon name="search" />
                      </template>
                    </q-input>
                  </q-item-label>
                  <q-item-label header class="text-center"
                    >{{ contacts_list.length }} 联系人
                  </q-item-label>
                  <span
                    v-for="(contact, index) in contacts_list"
                    :key="index"
                    @click="selected_contact = contact"
                  >
                    <contact-item
                      :avatar="contact.avatar"
                      :name="contact.name"
                      :position="contact.position"
                    ></contact-item>
                  </span>
                </q-list>
              </q-tab-panel>

              <q-tab-panel name="favorites" class="q-pa-none">
                <q-list class="">
                  <q-item-label class="text-center q-pa-sm">
                    <q-input dense rounded outlined v-model="search">
                      <template v-slot:append>
                        <q-icon name="search" />
                      </template>
                    </q-input>
                  </q-item-label>
                  <q-item-label header class="text-center"
                    >{{ favorites_list.length }} 关注</q-item-label
                  >

                  <span
                    v-for="(favorite, index) in favorites_list"
                    :key="index"
                    @click="selected_contact = favorite"
                  >
                    <contact-item
                      :avatar="favorite.avatar"
                      :name="favorite.name"
                      :position="favorite.position"
                    ></contact-item>
                  </span>
                </q-list>
              </q-tab-panel>
            </q-tab-panels>
          </q-scroll-area>

          <q-tabs v-model="tab" dense class="bg-grey-3" align="justify">
            <q-tab
              name="all"
              icon="person"
              class="text-capitalize"
              label="所有"
            ></q-tab>
            <q-tab
              name="favorites"
              icon="star"
              class="text-capitalize"
              label="关注"
            ></q-tab>
          </q-tabs>
        </q-card>
      </div>
      <div class="col-lg-8 q-pl-xs col-md-8 col-sm-12 col-xs-12">
        <q-card
          class="no-shadow"
          bordered
          :style="{ height: pageHeight + 'px !important' }"
        >
          <q-toolbar class="text-black">
            <q-btn round flat class="q-pa-sm">
              <q-avatar size="80px">
                <img :src="selected_contact.avatar" />
              </q-avatar>
            </q-btn>

            <q-item class="q-subtitle-1 q-pl-md">
              <q-item-section>
                <q-item-label lines="1">{{
                  selected_contact.name
                }}</q-item-label>
                <q-item-label caption lines="2">
                  <span class="text-weight-bold">{{
                    selected_contact.position
                  }}</span>
                </q-item-label>
              </q-item-section>
            </q-item>

            <q-space />

            <q-btn round flat icon="star_outline" color="yellow"> </q-btn>
            <q-btn round flat icon="edit" />
          </q-toolbar>
          <q-separator></q-separator>

          <div
            v-for="(detail, detail_index) in detail_list"
            :key="detail_index"
          >
            <contact-detail-item
              :icon="detail.icon"
              :text_color="detail.text_color"
              :value="selected_contact[detail['field'] as keyof typeof selected_contact]"
              :label="detail.label"
            ></contact-detail-item>

            <q-separator
              inset="item"
              v-if="detail_index != detail_list.length - 1"
            ></q-separator>
          </div>
        </q-card>
      </div>
    </div>

    <div v-else>
      <div v-if="selected_contact.name === ''">
        <q-scroll-area :style="{ height: pageHeight - 57 + 'px' }">
          <q-tab-panels v-model="tab" animated class="bg-white">
            <q-tab-panel name="all" class="q-pa-none">
              <q-list class="">
                <q-item-label class="text-center q-pa-sm">
                  <q-input dense rounded outlined v-model="search">
                    <template v-slot:append>
                      <q-icon name="search" />
                    </template>
                  </q-input>
                </q-item-label>
                <q-item-label header class="text-center"
                  >{{ contacts_list.length }} CONTACTS</q-item-label
                >

                <span
                  v-for="(contact, index) in contacts_list"
                  :key="index"
                  @click="selected_contact = contact"
                >
                  <contact-item
                    :avatar="contact.avatar"
                    :name="contact.name"
                    :position="contact.position"
                  ></contact-item>
                </span>
              </q-list>
            </q-tab-panel>

            <q-tab-panel name="favorites" class="q-pa-none">
              <q-list class="">
                <q-item-label class="text-center q-pa-sm">
                  <q-input dense rounded outlined v-model="search">
                    <template v-slot:append>
                      <q-icon name="search" />
                    </template>
                  </q-input>
                </q-item-label>
                <q-item-label header class="text-center"
                  >{{ favorites_list.length }} Favorites</q-item-label
                >

                <span
                  v-for="(favorite, index) in favorites_list"
                  :key="index"
                  @click="selected_contact = favorite"
                >
                  <contact-item
                    :avatar="favorite.avatar"
                    :name="favorite.name"
                    :position="favorite.position"
                  ></contact-item>
                </span>
              </q-list>
            </q-tab-panel>
          </q-tab-panels>
        </q-scroll-area>
        <q-tabs v-model="tab" dense class="bg-grey-3" align="justify">
          <q-tab
            name="all"
            icon="person"
            class="text-capitalize"
            label="All"
          ></q-tab>
          <q-tab
            name="favorites"
            icon="star"
            class="text-capitalize"
            label="Favorites"
          ></q-tab>
        </q-tabs>
      </div>
      <transition v-else appear enter-active-class="animated bounceInRight">
        <q-card
          class="no-border no-border"
          :style="{ height: pageHeight + 'px !important' }"
        >
          <q-toolbar class="text-black">
            <q-btn round flat class="q-pa-sm">
              <q-avatar size="80px">
                <img :src="selected_contact.avatar" />
              </q-avatar>
            </q-btn>

            <q-item class="q-subtitle-1 q-pl-md">
              <q-item-section>
                <q-item-label lines="1">{{
                  selected_contact.name
                }}</q-item-label>
                <q-item-label caption lines="2">
                  <span class="text-weight-bold">{{
                    selected_contact.position
                  }}</span>
                </q-item-label>
              </q-item-section>
            </q-item>

            <q-space />

            <q-btn round flat icon="star_outline" color="yellow"> </q-btn>
            <q-btn round flat icon="edit" />
            <q-btn
              round
              flat
              icon="keyboard_backspace"
              @click="selected_contact = { avatar: '', name: '', position: '' }"
            />
          </q-toolbar>
          <q-separator></q-separator>

          <div
            v-for="(detail, detail_index) in detail_list"
            :key="detail_index"
          >
            <contact-detail-item
              :icon="detail.icon"
              :text_color="detail.text_color"
              :value="selected_contact[detail['field'] as keyof typeof selected_contact]"
              :label="detail.label"
            ></contact-detail-item>

            <q-separator
              inset="item"
              v-if="detail_index != detail_list.length - 1"
            ></q-separator>
          </div>
        </q-card>
      </transition>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
import { ref, onMounted } from 'vue';
import { useQuasar } from 'quasar';
const $q = useQuasar();

import { baseImg, baseImg2, baseImg3 } from 'pages/data/list';

const detail_list = [
  {
    icon: 'phone',
    label: '手机号',
    field: 'phone',
    text_color: 'blue',
  },
  {
    icon: 'phone_iphone',
    label: '辅助手机号',
    field: 'secondary_phone',
    text_color: 'orange',
  },
  {
    icon: 'mail',
    label: '邮箱',
    field: 'email',
    text_color: 'grey-8',
  },
  {
    icon: 'business_center',
    label: '第二邮箱',
    field: 'company_email',
    text_color: 'grey-8',
  },
  {
    icon: 'location_on',
    label: '住址',
    field: 'address',
    text_color: 'grey-8',
  },
  {
    icon: 'home_work',
    label: '个人主页',
    field: 'website',
    text_color: 'grey-8',
  },
];

const contacts_list = [
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '柯南',
    position: '开发者',
    avatar: baseImg,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '江南',
    position: '作家',
    avatar: baseImg2,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '江南',
    position: '作家',
    avatar: baseImg2,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '余罪',
    position: '作家',
    avatar: baseImg2,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '林年',
    position: '作家',
    avatar: baseImg2,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
];

const favorites_list = [
  {
    name: '路明非',
    position: '衰仔',
    avatar: baseImg2,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '楚子航',
    position: '作家',
    avatar: baseImg2,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
  {
    name: '坦克',
    position: '作家',
    avatar: baseImg3,
    email: '123@qq.com',
    company_email: '123@qq.com',
    website: 'www.wangijun.com',
    phone: '18711112222',
    secondary_phone: '18722221111',
    address: '东京米花町2丁目21番地',
  },
];

const ContactDetailItem = defineAsyncComponent(
  () => import('components/ContactDetailItem.vue')
);
const ContactItem = defineAsyncComponent(
  () => import('components/ContactItem.vue')
);

const pageHeight = ref(400);
const styFn = (offset: number, height: number) => {
  pageHeight.value = height - offset - 18;
};

const tab = ref('all');
const search = ref('');
const selected_contact = ref<{
  avatar: string;
  name: string;
  position: string;
}>({ avatar: '', name: '', position: '' });

onMounted(() => {
  if (!$q.screen.lt.sm) {
    selected_contact.value = contacts_list[0];
  }
});
</script>

<style scoped></style>
